<template>
    <div class="boxs">
        <el-menu :default-active="$route.path" :collapse="boll" class="leftBox" :router="true">
            <template v-for="item in listData">
                <el-menu-item v-if="!item.children" :index="`/admin/${item.path}`" @click="handleClick(item)" :key="item"
                    class="childs">
                    <el-icon>
                        <iconMenu />
                    </el-icon>
                    <span>{{item.meta.title}}</span>
                </el-menu-item>

                <el-sub-menu v-else :index="item.name" class="childs">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>{{item.meta.title}}</span>
                    </template>
                    <el-menu-item v-for="child in item.children" :index="`/admin/${item.path}/${child.path}`" @click="handleClick(child)"
                        :key="child">{{child.meta.title}}</el-menu-item>
                </el-sub-menu>
            </template>

            <div class="la" @click="changes">
                <el-icon v-if="boll">
                    <Expand />
                </el-icon>
                <el-icon v-else>
                    <Fold />
                </el-icon>
            </div>

        </el-menu>

    </div>


</template>

<script>
    import routes from '../router/routes'
    import {
        mapMutations
    } from 'vuex'
    export default {
        data() {
            return {
                listData: routes.filter(item=>item.path =='/admin')[0].children,
                boll: false,
            }
        },
        methods: {
            handleClick(obj) {
                this.changeTitle(obj.meta.title)
                this.addList(obj)
            },
            ...mapMutations(['changeTitle', 'addList']),
            changes() {
                this.boll = !this.boll
            }
        },
        created(){
            console.log(this.listData);
        }
    }
</script>

<style scoped>
    .boxs {
        background-image: url(/11.png);
        background-size: cover;
        background-position: 50%;
        position: relative;
        height: 100%;
    }

    .leftBox {
        height: 100%;
        opacity: 0.85;
        position: relative;
    }

    .childs {
        opacity: 0.85;
    }

    .la {
        position: absolute;
        bottom: 10px;
        right: 5px;
        font-size: 30px;
        color: skyblue;
    }
</style>